<template>
  <view
    class="ikz-menu"
    :style="{
      color: cssInfo.color,
      margintop: cssInfo.margin_top + 'rpx',
      backgroundColor: cssInfo.background_color,
      width: cssInfo.width + '%',
      borderRadius: cssInfo.bg_border_radius + 'rpx',
    }"
  >
    <!--
		模板说明：
		1、支持一行4个图标和5个图标，通过css数据中的menu_num数量控制
		2、支持颜色自定义，直接使用css数据中的color
		3、其他显示和功能数据同系统设定
		 -->

    <view class="swiper-item">
      <!-- <view class="ikz-menu-sm" style="color:{{cssInfo.color}};margin-top:{{cssInfo.margin_top}}rpx;background-color:{{cssInfo.background_color}};width:{{cssInfo.width}}%;border-radius:{{cssInfo.bg_border_radius}}rpx;"> -->
      <view class="ikz-menu-sm">
        <block v-if="cssInfo.num == 4">
          <block v-for="(item, indexs) in show_info" :key="indexs">
            <!--分享和客服功能-->
            <block
              v-if="item.url.path == 'share' || item.url.path == 'contact'"
            >
              <view class="ikz-menu-item">
                <image
                  :class="indexs == 0 ? 'ikz-menu-img':'ikz-menu-img'"
                  :src="item.src"
                  :style="{ borderRadius: cssInfo.border_radius }"
                ></image>
                <!-- <image class="ikz-menu-img" :src="item.src"></image> -->
                <view class="ikz-menu-title">{{ item.title }}</view>
                <button
                  class="ikz-login-button"
                  :open-type="item.url.path"
                ></button>
              </view>
            </block>
            <!--分享和客服功能-->

            <!--正常功能-->
            <block v-else>
              <view
                class="ikz-menu-item"
                @click="directToPath"
                :data-info="item.url.info"
                :data-mode="item.url.mode"
                :data-path="item.url.path"
              >
                <image
                   :class="indexs == 0 ? 'ikz-menu-img1':'ikz-menu-img'"
                  :src="item.src"
                  :style="{ borderRadius: cssInfo.border_radius }"
                ></image>
                <!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
                <view class="ikz-menu-title">{{ item.title }}</view>
              </view>
            </block>
            <!--正常功能-->
          </block>
        </block>

        <block v-else>
          <block v-for="(item, indexs) in show_info" :key="indexs">
            <!--分享和客服功能-->
            <block
              v-if="item.url.path == 'share' || item.url.path == 'contact'"
            >
              <view class="ikz-menu-item-small">
                <image
                   :class="indexs == 0 ? 'ikz-menu-img1':'ikz-menu-img'"
                  :src="item.src"
                  :style="{ borderRadius: cssInfo.border_radius }"
                ></image>
                <!-- <image class="ikz-menu-img" :src="item.src" style='border-radius:{{cssInfo.border_radius}}'></image> -->
                <view class="ikz-menu-title-small">{{ item.title }}</view>
                <button
                  class="ikz-login-button"
                  :open-type="item.url.path"
                ></button>
              </view>
            </block>
            <!--分享和客服功能-->

            <!--正常功能-->
            <block v-else>
              <view
                class="ikz-menu-item-small"
                @click="directToPath"
                :data-info="item.url.info"
                :data-mode="item.url.mode"
                :data-path="item.url.path"
              >
                <image
                   :class="indexs <= 3 ? 'ikz-menu-img':'ikz-menu-img'"
                  :src="item.src"
                  :style="{ borderRadius: cssInfo.border_radius }"
                ></image>
                <!-- <image class="ikz-menu-img" src="{{item.src}}" style='border-radius:{{cssInfo.border_radius}}'></image> -->
                <view class="ikz-menu-title-small">{{ item.title }}</view>
              </view>
            </block>
            <!--正常功能-->
          </block>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import ikz from "@/pages/Common/tools";
export default {
  name: "menu3",
  props: {
    showData: {
      type: Object,
    },
    cssData: {
      type: Object,
    },
    user_info: {
      type: Object,
    },
    agent: {
      type: Boolean,
    },
  },
  data() {
    return {
      indicatorDots: true,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      background: ["", ""],
      cssInfo: {},
      badgeStyle: "",
      show_info: [],
    };
  },
  watch: {
    showData: {
      handler(newName, oldName) {
        this.show_info = newName.list;
      },
      immediate: true,
      deep: true,
    },
    cssData: {
      handler(newName, oldName) {
        var cssInfo = {};
        cssInfo.color = newName.color || "#353535";
        cssInfo.num = newName.num || 4;
        cssInfo.border_radius = newName.border_radius || 5;
        cssInfo.margin_top = newName.margin_top || 0;
        cssInfo.background_color = newName.background_color || "";
        cssInfo.width = newName.width || 100;
        cssInfo.bg_border_radius = newName.bg_border_radius || 0;
        this.cssInfo = cssInfo;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    setStyle() {
      this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`;
    },
    directToPath(e) {
      // console.log(
      //   this.user_info.auth,
      //   "this.user_info.auththis.user_info.auththis.user_info.auth"
      // );

      var path = "/xyb/user/baseinfo";
      var data = {
        token: uni.getStorageSync("local_user_session"),
        app_plat: "MP-WEIXIN",
      };
      ikz.get(path, data, (res) => {
        if (!this.agent) {
          if (res.data.data.user_info.run_apply_status == 0) {
            uni.showToast({
              title: "你还没有抢单员中心权限。",
              icon: "none",
            });
            return;
          }
        }
        if (this.agent) {
          if (res.data.data.user_info.bind_agent_id == 0) {
            uni.showToast({
              title: "你还没有代理中心权限。",
              icon: "none",
            });
            return;
          }
        }
        var mode = e.currentTarget.dataset.mode;
        console.log(".....");
        if (mode == 10) {
          var path = e.currentTarget.dataset.path  + '?showFoot=false';
          ikz.nav(path, "ln");
        } else {
          var url = {
            info: e.currentTarget.dataset.info,
            mode: e.currentTarget.dataset.mode,
            path: e.currentTarget.dataset.path,
          };
          if (e.currentTarget.dataset.info == "token") {
            if (!uni.getStorageSync("user_info")) {
              uni.navigateTo({
                url: "/pages/login/index",
              });
              return;
            }
          }
          ikz.path(url);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ikz-menu {
  width: 100%;
  margin: auto;
}
.ikz-swiper {
  height: 380rpx;
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  width: 95%;
  margin: 15rpx auto 0;
}
.ikz-menu-sm {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.ikz-menu-item {
  width: 25%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 15rpx 0px;
}
.ikz-login-button {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  border: 0px;
  z-index: 100;
}
.ikz-menu-item-small {
  width: 20%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin: 15rpx 0px;
  font-size: 29rpx;
}

.ikz-menu-img {
  width: 100rpx;
  height: 100rpx;
}


.ikz-menu-img1 {
  width: 80rpx;
  height: 80rpx;
}
.ikz-menu-img-circle {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.ikz-menu-img-small {
  width: 82rpx;
  height: 82rpx;
}

.ikz-menu-img-small-circle {
  width: 82rpx;
  height: 82rpx;
  border-radius: 50%;
}

.ikz-menu-title {
  width: 100%;
  margin-top: 5rpx;
  font-size: 28rpx;
}

.ikz-menu-title-small {
  width: 100%;
  margin-top: 5rpx;
  font-size: 25rpx;
}
</style>
